<template>
    <div>
        <Card>
            {{remarkInput}}
            <!--查询条件-->
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="组团">
                        <div class="filters-input">
                            <el-select v-model="filters.groupName" filterable placeholder="请选择组团" clearable
                                       no-data-text="暂无数据" @change="groupNamechange">
                                <el-option v-for="item in groupNameList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="楼栋">
                        <div class="filters-input">
                            <el-select v-model="filters.building" @change="buildingchange" placeholder="请选择楼栋"
                                       filterable
                                       clearable no-data-text="暂无数据">
                                <el-option v-for="item in buildList" :value="item.label"
                                           :key="item.label"
                                           :label="item.label"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="单元">
                        <div class="filters-input">
                            <el-select v-model="filters.unit" @change="unitchange" placeholder="请选择单元" filterable
                                       clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in unitList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="房间">
                        <div class="filters-input">
                            <el-select v-model="filters_room" placeholder="请选择房间号" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in roomList" :value="item.label" :key="item.label"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="业主名">
                        <div class="filters-input">
                            <Input v-model="filters.ownerName" placeholder="业主名" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="交易单号">
                        <div class="filters-input">
                            <Input v-model="filters.orderNo" placeholder="商户单号" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型">
                        <div class="filters-input">
                            <el-select v-model="filters.costTypeId" placeholder="请选择费用类型" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in costType" :value="item.id" :key="item.id" :label="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="付款类型">
                        <div class="filters-input">
                            <el-select v-model="filters.payType" placeholder="请选付款类型" filterable clearable>
                                <el-option value="1" label="微信"></el-option>
                                <el-option value="2" label="支付宝"></el-option>
                                <el-option value="3" label="现金"></el-option>
                                <el-option value="4" label="刷卡"></el-option>
                                <el-option value="5" label="银行转账"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="付款日期">
                        <div class="filters-input">
                            <DatePicker type="daterange" v-model="filters.theDate" placeholder="请选择日期"
                                        clearable></DatePicker>
                        </div>
                    </FormItem>
                    <FormItem>
                        <ButtonGroup>
                            <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                            <Button type="warning" icon="md-share-alt" @click="getNewOrderExcel()">
                                导出交易信息
                            </Button>
                        </ButtonGroup>
                    </FormItem>
                </Form>
            </Row>

            <!--数据列表-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%"
                      @expand-change="queryBillInfo">
                <template slot="empty">暂无数据</template>

                <el-table-column type="expand" v-loading="billInfoTableLoading">
                    <template slot-scope="props">
                        <div class="billBox">
                            <div class="bill-item" v-for="(item,index) in billInfo" :key="index">
                                <span>{{index+1}}、</span>
                                <span>账期：{{item.accountPeriod}}</span>
                                <span>费用类型：{{item.costTypeName}}</span>
                                <span>应缴金额：{{item.amount}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ownerName" label="业主名"></el-table-column>
                <el-table-column label="住址">
                    <template slot-scope="scope">
                        {{scope.row.housingName}}/{{scope.row.groupName || " "}}/{{scope.row.building || ""}}/{{scope.row.unit || " "}}/{{scope.row.room}}
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="应缴总额"></el-table-column>
                <el-table-column prop="orderNo" label="商户单号"></el-table-column>
                <el-table-column prop="payType" label="付款类型" :formatter="formatterPayType"></el-table-column>
                <el-table-column prop="payDate" label="付款时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="lyPrinting( scope.row)">补打</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--页数-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <!--<Modal v-model="exportExcel" title="导出excel" width="900" class="modal-content"
               :mask-closable="false">
            <Form :model="newOrder" :rules="rules" ref="newOrder" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="newOrder.housingId" placeholder="请选择小区" filterable
                                   style="width: 100%" clearable no-data-text="暂无数据">
                            <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                       :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="exportExcel == false">取消</Button>
                <Button type="primary" @click="submitExportExcel('newOrder')">确定</Button>
            </div>
        </Modal>-->
    </div>
</template>

<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";
    import moment from "moment"

    const token = Cookies.get(TOKEN_KEY);

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.room = this.filters_room;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        //与后台交换数据
        this.postRequest("/api/bill/tradingCenter", params).then(res => {
            this.tableLoading = false;
            console.log(res);
            if (res.code == 20000) {
                this.tableData = res.data.pageInfo.list;
                this.pageTotal = res.data.pageInfo.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //加载费用类型
    let getCostType = function (value) {
        this.getRequest(
            "/api/costType/getCostTypeByhousingId?housingId=" + value
        ).then(res => {
            // console.log(res);
            if (res.code == 20000) {
                this.costType = res.data;
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //加载小区
    let gethouse = function () {
        let url = "/api/housing/getHousingByLogin";
        this.postRequest(url).then(res => {
            this.houseList = res;
            this.filters.housingId = res[0].id;
            this.housechange(this.filters.housingId);
            this.getCostType(this.filters.housingId);
            this.loadData();
        });
    };
    //选择小区，加载组团
    let housechange = function (value) {
        this.getCostType(value);
        this.groupNameList = [];
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.filters.groupName = "";
        this.filters.building = "";
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.groupName = "";
        this.modal.building = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modal.costTypeId = null;
        this.modalDelete.groupName = "";
        this.modalDelete.building = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {
            // console.log(res)
            if (res.data.groupList != null) {
                this.groupNameList = res.data.groupList;
            } else if (res.data.buildList != null) {
                this.buildList = res.data.buildList;
            } else if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选择组团，加载楼栋
    let groupNamechange = function (value) {
        this.buildList = [];
        this.unitList = [];
        this.roomList = [];
        this.filters.building = "";
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.building = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modalDelete.building = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        let url;
        if (this.filters.groupName) {
            //查询条件
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.filters.housingId;
        } else if (this.modal.groupName) {
            //新增账单
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.modal.housingId;
        } else {
            //批量删除账单
            url =
                "/api/room/queryBuilding?groupName=" +
                value +
                "&housingId=" +
                this.modalDelete.housingId;
        }
        this.getRequest(url).then(res => {
            // console.log(res)
            if (res.data.buildList != null) {
                this.buildList = res.data.buildList;
            } else if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选楼栋，加载单元
    let buildingchange = function (value) {
        this.unitList = [];
        this.roomList = [];
        this.filters.unit = "";
        this.filters_room = "";
        this.modal.unit = "";
        this.modal.room = "";
        this.modalDelete.unit = "";
        this.modalDelete_room = "";
        let url = "/api/room/queryUnit";
        let params = {};
        if (this.filters.building) {
            //查询条件
            params.building = value;
            params.housingId = this.filters.housingId;
            params.groupName = this.filters.groupName;
        } else if (this.modal.building) {
            //新增账单
            params.building = value;
            params.housingId = this.modal.housingId;
            params.groupName = this.modal.groupName;
        } else {
            //批量删除账单
            params.building = value;
            params.housingId = this.modalDelete.housingId;
            params.groupName = this.modalDelete.groupName;
        }
        // console.log(params)
        this.postRequest(url, params).then(res => {
            // console.log(res)
            if (res.data.unitList != null) {
                this.unitList = res.data.unitList;
            } else {
                this.roomList = res.data.roomList;
            }
        });
    };
    //选择单元加载房间
    let unitchange = function (value) {
        this.roomList = [];
        this.filters_room = "";
        this.modal.room = "";
        this.modalDelete_room = "";
        let url;
        if (this.filters.unit) {
            //查询条件
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.filters.housingId +
                "&groupName=" +
                this.filters.groupName +
                "&building=" +
                this.filters.building;
        } else if (this.modal.unit) {
            //新增账单
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.modal.housingId +
                "&groupName=" +
                this.modal.groupName +
                "&building=" +
                this.modal.building;
        } else {
            //批量删除账单
            url =
                "/api/room/queryRoom?unit=" +
                value +
                "&housingId=" +
                this.modalDelete.housingId +
                "&groupName=" +
                this.modalDelete.groupName +
                "&building=" +
                this.modalDelete.building;
        }
        this.getRequest(url).then(res => {
            this.roomList = res.data.roomList;
        });
    };
    //查询详细信息
    let queryBillInfo = function (row, expandedRows) {
        this.billInfo = [];
        if (expandedRows.length > 1) {
            expandedRows.shift();
            this.getRequest("/api/bill/queryBillInfo?orderNo=" + row.orderNo).then(res => {
                if (res.code == 20000) {
                    this.billInfo = res.data;
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        } else {
            this.getRequest("/api/bill/queryBillInfo?orderNo=" + row.orderNo).then(res => {

                if (res.code == 20000) {
                    this.billInfo = res.data;
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        }
    }
    //补打
    let lyPrinting = function (row) {
        this.$Modal.confirm({
            title: "提示",
            content: "确定打印该条记录？",
            onOk: () => {
                this.getRequest("/api/bill/printBill?orderNo=" + row.orderNo).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.$Message.success("打印成功!");
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            onCancel: () => {
            }
        });
    };
    //导出excel
    let getNewOrderExcel = function () {
        window.location.href = baseURL + "/common/getNewOrderExcel?housingId="+this.filters.housingId;
    }
    export default {
        name: "houseList",
        components: {
            Treeselect
        },
        data() {
            return {
                //校验规则
                rules: {
                    housingId: [
                        {
                            required: true,
                            message: "请选择小区",
                        }
                    ],
                },
                newOrder:{},
                exportExcel:false,
                formInline: {},
                remarkInput: "",
                name: "",
                //查询条件
                filters: {
                    housingId: '',
                    payStatus: '2',
                },
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //新增或修改
                modal: {
                    selectRoom: '',
                    selectCostTypeId: '',
                },
                //删除条件
                modalDelete: {},
                //导出账单条件
                modalBill: {},
                //表格数据
                tableData: [],
                //数据表格隐藏状态
                tableLoading: false,
                billInfoTableLoading: false,
                payStatus: [],
                status: [],
                houseList: [],
                groupNameList: [],
                buildList: [],
                unitList: [],
                roomList: [],
                room: [],
                filters_room: "",
                modalDelete_room: "",
                costType: [],
                token: token,
                fileList: [],
                msgInfo: {},
                timer: null,
                formModal: {
                    selectRoom: '',
                    selectCostTypeId: '',
                },
                allInof: {},
                billInfo: [],
            };
        },
        created: function () {
            this.gethouse();
        },
        methods: {
            loadData,
            getCostType,
            gethouse,
            housechange,
            groupNamechange,
            buildingchange,
            unitchange,
            queryBillInfo,
            lyPrinting,
            getNewOrderExcel,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //查询
            handleQuery(name) {
                this.filters.theDate[0] = moment(this.filters.theDate[0]).format("YYYY-MM-DD");
                this.filters.theDate[1] = moment(this.filters.theDate[1]).format("YYYY-MM-DD");
                this.loadData();
            },
            //付款类型
            formatterPayType(row, column) {
                if (row.payType == 1) {
                    return "微信";
                } else if (row.payType == 2) {
                    return "支付宝";
                } else if (row.payType == 3) {
                    return "现金";
                } else if (row.payType == 4) {
                    return "刷卡";
                } else if (row.payType == 5) {
                    return "银行转账";
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    #lyPage {
        display: inline-block;
    }

    .info {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .p-info {
        text-align: center;
        font-size: 14px;
        line-height: 40px;
    }

    .billBox {
        .bill-item {
            width: 100%;
            line-height: 30px;
            span {
                padding-right: 20px;
            }
        }
    }

</style>
